<template>
  <div class="render3">
    {{ title }}

    <div v-if="editor" class="editor-shell">
      <EditorContent :editor="editor" class="editor-surface" />
    </div>
    <div class="button">
      <button @click="tojson">输出 json</button>
      <button @click="toschema">输出 schema</button>
    </div>
    <div ref="measureHost" class="page-measure" aria-hidden="true"></div>
  </div>
</template>
<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import Document from "@tiptap/extension-document";
import Text from "@tiptap/extension-text";
// import Paragraph from "@tiptap/extension-paragraph";
import Paragraph from "./edtior/node/paragraphNode.js";
import { DrawExtension } from "./plugin/DrawExtension.js";

import docContent from "./edtior/docContent.js";

export default {
  name: "render4",
  components: {
    EditorContent,
  },
  data() {
    return {
      title: "render4",
      pageSize: {
        width: 620,
        height: 820,
      },
      pagePadding: {
        horizontal: 48,
        top: 40,
        bottom: 56,
      },
      content: docContent,
      editor: null,
      measureCtx: null,
      metrics: {
        fontSize: 14,
        lineHeight: 22.4,
        fontFamily: '"PingFang SC", "Microsoft YaHei", Arial, sans-serif',
        paragraphSpacing: 12,
        firstLineIndentEm: 2,
      },
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor = new Editor({
        extensions: [Document, Paragraph, Text, DrawExtension],
        content: this.content,
      });
      //   this.editor.registerPlugin(new DrawPlugin());
    //   this.editor.on("update", this.updatePages);
    //   const drawPluginState = drawKey.getState(this.editor.state);
    //   const draw = drawPluginState?.draw;
    //   if (draw) {
    //     draw.addHook("childContainer", "paragraph", (node, container) => {
    //       container.dataset.tipDraw = "paragraph";
    //       return container;
    //     });
    //   }
      this.ensureMeasureContext();
      this.$nextTick(this.updatePages);
    },
    ensureMeasureContext() {
      if (this.measureCtx) {
        return this.measureCtx;
      }

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      if (!ctx) {
        return null;
      }

      ctx.font = `${this.metrics.fontSize}px ${this.metrics.fontFamily}`;
      this.measureCtx = ctx;
      return ctx;
    },
    updatePages() {
      if (!this.editor) {
        this.pages = [];
        return;
      }
    },
    tojson() {
      console.log(this.editor.getJSON());
    },
    toschema() {
      console.log(this.editor.schema);
    },
  },
};
</script>
<style scoped lang="scss">
.render3 {
  padding: 16px;
  border: 1px solid #ccc;

  .editor-shell {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
    min-height: 300px;
  }
}

.render3-paragraph {
  position: relative;
}

.render3-paragraph__content {
  color: transparent;
}

.render3-paragraph__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
  white-space: pre-wrap;
}

.render3-paragraph__line {
  display: block;
  white-space: pre-wrap;
}

.page-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
}
</style>
